<template>
	<div class="buy">
		<div class="sellBox">
			<dl class="txt">
				<dt><span>当前市值</span></dt>
				<dd>{{ parseFloat(initData.price).toFixed(4) }} <span>TXL</span></dd>
			</dl>
			<dl class="txt">
				<dt><span>交易钱包</span></dt>
				<dd>{{ tradeMoney }} <span></span></dd>
			</dl>
			<dl class="input">
				<dt><span>卖出量</span></dt>
				<dd><input type="text" @input='change' v-model="sellNum" placeholder="卖出量"></dd>
			</dl>
			<dl class="input">
				<dt><span>验证码</span></dt>
				<dd><input type="text" placeholder="验证码" v-model="imgCode"><img :src="initData.captcha" class="verifiCode" @click='replaceCode' alt=""></dd>
			</dl>
			<input type="submit" class="submit" value="卖出" @click='sellSubmit'>
		</div>
		<div class="ruleBox">
			<div class="calcTXLPrice">{{calcTXL}}</div>
			<div class="rule">
				<router-link tag='span' to='/personal/protocol'>《交易规则》</router-link>
				<router-link tag='span' to='/personal/receipt/1'>《填写收款信息》</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import { tradeSellerOut, tradeSellerOutSubmit, isReceiptInfo } from '../../../../config/getData'
export default {
	data(){
		return {
			initData:{price:0},
			sellNum:'',
			imgCode:''
		}
	},
	methods:{
		sellSubmit(){
			var txt = ''
			if(this.sellNum == '' || this.imgCode == ''){
				txt = this.sellNum == '' ? '请输入卖出量' : this.imgCode == '' ? '请输入验证码' : ''
				this.$vux.toast.show({
					text: txt,
					width:'auto',
				})
				return
			}
			if(this.sellNum % 500 !== 0){
				this.$vux.toast.show({
					text: '卖出量只能输入500的倍数',
					width:'auto',
				})
				return
			}
			isReceiptInfo().then( res => {
				if(res.data.is_completion == 1){
					this.$vux.toast.show({
						text: res.msg,
						type:'success',
					})
					this.$router.push('/personal/receipt/1')
				}else{
					tradeSellerOutSubmit(this.initData.price, this.sellNum[0], this.imgCode).then(res => {
						this.$vux.toast.show({
							text: res.msg,
							type:'success',
						})
						this.sellNum = ''
						this.imgCode = ''
						this.replaceCode()
					})
				}
			})
			return
		},
		change(){
			this.sellNum = /[0-9]+/g.exec(this.sellNum)
		},
		replaceCode(){
			this.initData.captcha = ''
			setTimeout( () => this.initData.captcha = sessionStorage.imgCodeUrl,100)
		},
	},
	computed:{
		tradeMoney(){
			try{
				return parseFloat(this.initData.tradeMoney).toFixed(4)
			}catch(e){

			}
		},
		calcTXL(){

			if(this.initData.price){
				return '交易额：' + (this.initData.price * 10000 * this.sellNum / 10000).toFixed(4)
			}else{
				return '交易额：'
			}
		},
	},
	created(){
		tradeSellerOut().then( res => {
			this.initData = res.data;

		})
	},
}
</script>


<style lang="scss" scoped>
.buy{margin-top:15px;padding-bottom:20px;
	.sellBox{background-color: white;padding-bottom: 20px;}
	dl{display: flex;margin: 0 15px;padding:5px 0;line-height:40px;border-bottom:1px solid #e6e6e6;
		dt{width: 80px;
			span{display: inline-block;width:98%;line-height: 1;}
		}
		dd{flex:1;position: relative;
			input{width: 94%;height: 40px;border:none;margin-left: 6%;}
			.verifiCode{position: absolute;right:0;top:0;width:100px;height:40px;background-color: #f5f5f5;}
		}
	}
	dl.input span{border-right:1px solid #ccc;}
	.calcTXLPrice{text-align: center;margin-top:50px;}

	input.submit{width:90%;height: 40px;margin:40px auto 0;display: block;}
	.rule{text-align: center;color:#da1e1e;width:100%;margin-top: 100px;}
	.ruleBox{padding-bottom: 40px;}
}
</style>

